<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全部客户</title>
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
	<style type="text/css">
		body{
			overflow-y: hidden;
		}
		.add_tb {
			width: 26px;
			height: 26px;
			margin: 0 0 0 10px;
		}

		.delete_tb {
			width: 26px;
			height: 26px;
			margin: 0 0 0 10px;
		}
		#dv {
			background-color: white;
			width: 96%;
			margin: 20px 20px auto;
		}
	</style>
</head>
<body bgcolor="whitesmoke">
<div id="dv">
	</br>
	&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-dialogue" style="width: 150px;height: 100px;"><b>主要客户</b></i>
	</br></br>
</div>
<div id="toolBar" style="display: none;">
<!--	<div class="layui-btn-group">-->
<!--		<button type="button" class="add_tb " lay-event="add"><i class="layui-icon">&#xe654;</i></button>-->
<!--		<button type="button" class="delete_tb" lay-event="delete" ><i-->
<!--				class="layui-icon">&#xe640;</i></button>-->
<!--	</div>-->
</div>

<!--每一行后面的删除和修改按钮-->
<div style="display: none" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="singleEdit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="singleDel">删除</a>
</div>

<!--id 给js或者jQuery使用的-->
<table id="demo" lay-filter="test"></table>
<script src="../../js/jquery3.js"></script>
<script src="../../layui/layui.js"></script>
<script type="text/javascript">
	$(function() {
		$.post("/user/getSelf", {}, function(data) {
			if (data != null) {
				layui.use(["table", "layer"], function() {
					var table = layui.table;
					var layer = layui.layer;
					//第一个实例
					table.render({
						elem: '#demo',
						height: 540,
						toolbar: "#toolBar",
						url: '/contact/findAllPageMe',
						where: {
							u_id: data.u_id,
						},
						page: {
							theme: '#77aa96'
						} //开启分页
						,cellMinWidth: 110,
						cols: [
							[{
								type: 'checkbox',
								fixed: 'left'
							}, {
								field: 'c_id',
								title: '客户id',
								sort: true,
								fixed: 'left'
							}, {
								field: 'c_name',
								title: '客户名称'
							},  {
								field: 'c_clue',
								title: '线索',
							},  {
								field: 'c_level',
								title: '客户级别',
								sort: true
							},{
								field: 'c_tel',
								title: '手机',
								sort: true
							}, {
								field: 'c_email',
								title: '邮箱',

							}, {
								field: 'c_industry',
								title: '客户行业',

							}, {
								field: 'c_address',
								title: '客户地址',
							}, {
								field: 'next_time',
								title: '下次跟进时间',
								sort: true
							},{
								field: 'update_time',
								title: '更新时间',
								sort: true
							},  {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 150
							}]
						]
					});

					//监听每一行的操作
					table.on("tool(test)", function(obj) {
						var event = obj.event;
						var data= obj.data;
						if (event == 'singleEdit') {
							layer.open({
								type:2,
								title:'修改信息',
								shadeClose:true,
								shade:0.8,
								area:['700px','90%'],
								shadeClose:false,
								content:'edit.html?c_id='+data.c_id
							});
						} else if (event == 'singleDel') {
							layer.confirm('Are you sure you want to delete it?', function(index) {
								obj.del();
								layer.close(index);
								$.ajax({
									//编写json格式，设置属性和值
									url:"/contact/del?c_id="+data.c_id,
									contentType: "application/json;charset=utf-8",
									dataType: "json",
									type: "get",
									success: function (data) {
										//服务器端成功响应的json数据，进行解析
									}
								})
							});
						}


					});

					//监听头部工具栏的点击
					table.on('toolbar(test)', function(obj) {
						switch (obj.event) {
							case 'add':
								layer.open({
									type:2,
									title:'添加信息',
									shadeClose:true,
									shade:0.8,
									area:['700px','90%'],
									shadeClose:false,
									content:'edit.html'
								})
								break;
							case 'delete':
								break;
						}
					});
				})
			} else {
				alert("未登录，请先登录")
				location.href = "../login/login.html"
			}
		})
	})
</script>
</body>
</html>
